<template>
  <div class="livepreviewstyle">
    <!-- 标题 -->
    <h2>{{ datas.text }}</h2>
    <el-form label-width="80px" :model="datas" size="small">
      <h5 style="color: #000; font-size: 14px">点击添加</h5>
      <p style="color: #969799; font-size: 12px; margin-top: 10px">
        鼠标拖拽调整卡片顺序
      </p>
      <!-- 图片广告 -->
      <div>
        <vuedraggable v-model="datas.imageList" v-bind="dragOptions">
          <transition-group>
            <section v-for="(item, index) in datas.imageList" :key="item + index" class="imgBanner">
              <i class="el-icon-circle-close" @click="deleteimg(index)" />
              <!-- 图片 -->
              <div class="imag">
                <img
                  src="../../../assets/images/add.png"
                  @click="showUpload('second', index)"
                  alt
                  draggable="false"
                  v-if="!item.src"
                />
                <img
                  :src="item.src"
                  @click="showUpload('second', index)"
                  alt=""
                  draggable="false"
                />
              </div>
              <!-- 标题和链接 -->
              <div class="imgText">
                <el-input v-model="item.text" placeholder="标题" size="mini" clearable />
                <div style="height: 5px" />
                <el-input v-model="item.desc" placeholder="描述" size="mini" clearable />
                <div style="height: 5px" />
                <!-- 标题和链接 -->
                <div class="imgTextChild">
                  <!-- 选择类型 -->
                  <select-link
                    @selectThisLink="selectThisLink"
                    @clearThisLink="clearThisLink(index)"
                    :linktypeurl="item.url"
                    :theIndex="index"
                  />
                </div>
                <div style="height: 5px" />
                <!-- 公众号链接 -->
                <el-input v-model="item.liveUrl" placeholder="公众号链接" size="mini" clearable />
                <div style="height: 5px" />
                <el-input v-model="item.flag" placeholder="时间标签" size="mini" clearable />
                <div style="height: 5px" />
                <!-- 时间选择 -->
                <div class="chooseTime" v-for="(ite, ind) in item.formDate" :key="ind">
                  <div>
                    <el-date-picker
                      type="dates"
                      v-model="ite.dateValue"
                      placeholder="选择一个或多个直播日期"
                      @change="chooseLiveDate">
                    </el-date-picker>
                    <div style="height: 5px" />
                    <el-time-picker
                      is-range
                      v-model="ite.timeValue"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      placeholder="选择直播时间"
                      style="width: 220px"
                      @change="chooseLiveTime($event, index)">
                    </el-time-picker>
                    <div style="height: 5px" />
                  </div>
                  <i class="el-icon-delete" @click="deleteChoose(index,ind)"></i>
                </div>
                <el-button @click="addForm(index)" type="success">添加直播时间</el-button>
                <div style="height: 5px" />
                <!-- 年级选择 -->
                <el-cascader
                  placeholder="请选择年级"
                  :options="gradelist"
                  v-model="item.activeGrade"
                  :props="{ multiple: true }"
                  @change="chooseGrade(index)"
                  clearable>
                </el-cascader>
                <div style="height: 5px" />
                <!-- 学习按钮 -->
                <el-input v-model="item.studyBtn" placeholder="学习按钮" size="mini" clearable />
                <div style="height: 5px" />
                <!-- 直播按钮 -->
                <el-input v-model="item.liveBtn" placeholder="直播按钮" size="mini" clearable />
                <el-form-item class="lef" label="VIP标识">
                  <el-radio-group v-model="item.isVipShow">
                    <el-radio :label="1">显示</el-radio>
                    <el-radio :label="2">隐藏</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </section>
          </transition-group>
        </vuedraggable>
      </div>
      <!-- 上传图片 -->
      <el-button class="uploadImg" type="primary" plain @click="addContent">
        <i class="el-icon-plus" />
        点击添加
      </el-button>
    </el-form>
    <!-- 上传图片 -->
    <uploadimg ref="upload" @uploadInformation="uploadInformation" />
  </div>
</template>

<script>
import vuedraggable from "vuedraggable"; // 拖拽组件
import uploadimg from "../../uploadImg"; // 图片上传
import SelectLink from "../../selectLink";
import { timeFormat, getStringToDate } from "../../../utils/filter";
export default {
  name: "Livepreviewstyle",
  components: {
    vuedraggable,
    uploadimg,
    SelectLink,
  },
  props: {
    datas: Object,
  },
  data() {
    return {
      dragOptions: {
        animation: 200,
      },
      props: { multiple: true },
      gradelist: [
        {
          value: "0001",
          label: "小学",
          children: [
            {
              value: "0001",
              label: "一年级",
            },
            {
              value: "0002",
              label: "二年级",
            },
            {
              value: "0003",
              label: "三年级",
            },
            {
              value: "0004",
              label: "四年级",
            },
            {
              value: "0005",
              label: "五年级",
            },
            {
              value: "0006",
              label: "六年级",
            },
          ],
        },
        {
          value: "0002",
          label: "初中",
          children: [
            {
              value: "0007",
              label: "七年级",
            },
            {
              value: "0008",
              label: "八年级",
            },
            {
              value: "0009",
              label: "九年级",
            },
          ],
        },
        {
          value: "0003",
          label: "高中",
          children: [
            {
              value: "0011",
              label: "高中",
            },
          ],
        },
      ],
      dateArr: [],
      timeArr: [],
      startTime: "",
      endTime: "",
      dateTimeArr: [],
    };
  },
  methods: {
    addContent() {
      this.datas.imageList.push({
        src: "",
        text: "",
        desc: "",
        flag: "", // 标签
        url: "",
        liveUrl: "",
        timeList: [],
        studyBtn: "",
        liveBtn: "",
        activeGrade: "", // 自用属性
        classList: [],
        isVipShow: 2,
        formDate: [
          {
            dateValue: "",
            timeValue: [
              new Date(2016, 9, 10, 22, 40),
              new Date(2016, 9, 10, 23, 40)
            ]
          }
        ],
      });
    },
    chooseGrade(index) {
      const valObj = this.datas.imageList[index].activeGrade.map((item) => ({
        stageCode: item[0],
        gradeCode: item[1],
      }));
      this.datas.imageList[index].classList = valObj;
    },
    showUpload(type, index) {
      this.changeType = type;
      this.changeIndex = index;
      this.$refs.upload.showUpload();
    },
    // 提交
    uploadInformation(res) {
      if (this.changeType == "first") {
        this.datas.imageList.push({
          src: res,
          text: "这里显示标题最多显示2行",
          desc: "这里显示描述",
          type: "1",
        });
      } else {
        this.datas.imageList[this.changeIndex].src = res;
      }
    },
    // 选择链接
    selectThisLink(resu) {
      console.log(resu, "resu");
      this.datas.imageList.forEach((it, ind) => {
        if (ind == resu.index) {
          it.url = resu.url;
          it.linktype = resu.linktype;
          if (resu.name != undefined) {
            it.text = resu.name;
          }
          if (resu.note != undefined) {
            it.desc = resu.note;
          }
          if (resu.fileUrlSmall != undefined) {
            it.src = resu.fileUrlSmall;
          }
          it.id = resu.id;
          it.courseNum = resu.courseNum;
          it.type = resu.type;
          it.suitesId = resu.suitesId;
          it.goodsLabel = resu.goodsLabel;
        }
      });
    },
    clearThisLink(index) {
      this.datas.imageList[index].url = "";
    },
    /* 删除图片 */
    deleteimg(index) {
      this.datas.imageList.splice(index, 1);
    },
    addForm(index) {
      this.datas.imageList[index].formDate.push({
        dateValue: "",
        timeValue: [new Date(2016, 9, 10, 22, 40), new Date(2016, 9, 10, 23, 40)],
      });
    },
    deleteChoose(index,ind) {
      this.datas.imageList[index].formDate.splice(ind, 1);
    },
    chooseLiveDate(val) {
      let dateArr = Object.values(val);
      dateArr.forEach((item) => {
        // console.log(timeFormat(item,'yyyy-mm-dd'));
        this.dateArr.push(timeFormat(item, "yyyy-mm-dd"));
      });
    },
    chooseLiveTime(val, index) {
      val.forEach((item) => {
        // console.log(timeFormat(item,'hh-mm'));
        this.timeArr.push(timeFormat(item, "hh-mm"));
      });
      for (let i = 0; i < this.dateArr.length; i++) {
        let dat = this.dateArr[i], stime = this.timeArr[0], etime = this.timeArr[1];
        this.startTime = dat + " " + stime;
        this.endTime = dat + " " + etime;
        let dateObj = {};
        dateObj["startTime"] = Date.parse(getStringToDate(this.startTime)) / 1000;
        dateObj["endTime"] = Date.parse(getStringToDate(this.endTime)) / 1000;
        console.log(dateObj, "dateObjdateObj");
        this.dateTimeArr.push(dateObj);
      }
      this.datas.imageList[index].timeList = Array.from(
        new Set(this.dateTimeArr.map(JSON.stringify)),
        JSON.parse
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.livepreviewstyle {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px 20px;
  box-sizing: border-box;
  .bor {
    height: 1px;
    margin: 20px 0;
    background-color: #ebedf0;
  }
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
  .lef {
    .el-form-item__label {
      text-align: left;
    }
  }
  /* 卡片列表 */
  .imgBanner {
    padding: 6px 12px;
    margin: 16px 7px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
    display: flex;
    position: relative;

    /* 删除图标 */
    .el-icon-circle-close {
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
      font-size: 19px;
    }

    /* 图片 */
    .imag {
      width: 90px;
      height: 90px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
      span {
        background: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #fff;
        height: 20px;
        line-height: 20px;
      }
    }
    .chooseTime {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    /* 图片字 */
    .imgText {
      width: 80%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-left: 10px;
      justify-content: space-between;
      /* 图片字 */
      .imgTextChild {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        .fir-sele.el-select {
          width: 40%;
        }
      }
    }
  }
}
</style>
